<!-- 订单退还货 -->
<!-- yb 2023年4月5日 16:22 -->
<template>
    <div class="divv">
      <div class="div1">
        <div class="div2">
            <h3 style="width:100%; float:left;text-align: center; ">申请返修/退换货</h3>
             <h1 style="width:100%; float:left;text-align: center; margin-top: 100px;" v-if="this.orderNumber == null">没有申请返修或退换货</h1>
                <div class="div4" v-if="this.orderNumber != null">
                    <div class="div5">
                        <div class="div5-1">
                            <p style="text-align: center; line-height: 10px;">订单编号</p>
                        </div>
                        <div class="div5-2">
                            <p style="text-align: center; line-height: 10px;">商品名称</p>
                        </div>
                        <div class="div5-2">
                            <p style="text-align: center; line-height: 10px;">购买时间</p>
                        </div>
                        <div class="div5-2">
                            <p style="text-align: center; line-height: 10px;">商品价钱</p>
                        </div>
                    </div>
                    <div class="div6">
                        <div class="div6-1">
                            <p style="text-align: center; font-size: 16px; line-height: 35px;">{{ this.orderNumber }}</p>
                        </div>
                        <div class="div6-2">
                            <p v-if="this.orderTypeId == 1" style="text-align: center; font-size: 16px; line-height: 20px;">{{ this.commodityName }}</p>
                            <p v-if="this.orderTypeId == 2" style="text-align: center; font-size: 16px; line-height: 20px;">{{ this.diyName }}</p>
                        </div>
                        <div class="div6-2">
                            <p style="text-align: center; font-size: 16px; line-height: 35px;">{{this.createTime}}</p>
                        </div>
                        <div class="div6-2">
                            <p v-if="this.orderTypeId == 1" style="text-align: center; font-size: 16px; line-height: 35px;">{{this.orderAmountTotal}}</p>
                            <p v-if="this.orderTypeId == 2" style="text-align: center; font-size: 16px; line-height: 35px;">{{this.orderAmountTotal}}</p>
                        </div>
                    </div>
                </div>
                <div class="div7">
                    <el-form ref="addForm" :model="addForm" label-width="80px">
                        <el-form-item label="服务类型:" v-if="this.status == '已付款' || this.status == '已发货'">
                            <el-select v-model="addForm.ordersType" placeholder="请选择服务类型">
                            <el-option label="申请退货/退款" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="服务类型:" v-if="this.status == '已签收' || this.status == '待评价'">
                            <el-select v-model="addForm.ordersType" placeholder="请选择服务类型">
                            <el-option label="申请退货/退款" value="2"></el-option>
                            <el-option label="申请换货" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="提交原因:" v-if="this.status == '已签收' || this.status == '待评价'">
                            <el-select v-model="addForm.ordersCause" placeholder="请选择提交原因">
                            <el-option label="商品损坏/有问题" value="商品损坏/有问题"></el-option>
                            <el-option label="不想要了" value="不想要了"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="描述问题" v-if="this.status == '已签收' || this.status == '待评价'">
                            <el-input type="textarea" v-model="addForm.ordersDescribe" style=" width: 600px;"></el-input>
                        </el-form-item>
                        <p v-if="this.status == '已签收' || this.status == '待评价'">上传商品图片：</p>
                        <el-upload v-if="this.status == '已签收' || this.status == '待评价'"
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        <el-form-item v-if="this.status == '已签收' || this.status == '已签收' ||this.status == '已付款'|| this.status == '待评价' || this.status == '已发货'">
                            <el-button type="primary" @click="AfterSalesList()" style="margin-top:20px;">立即提交</el-button>
                            <el-button @click="resetForm('homeForm')">取消</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
  
  <script>
  export default {
      data() {
      return {
        SalesListData: [],
        input: '',
        // diy商品区分id
        orderTypeId : '',
        // 订单编号
        orderNumber : '',
        // 商品价格
        favorablePrice : '',
        // 商品名称
        commodityName : '',
        // 创建时间
        createTime : '',
        // diy价格
        diyPrice : '',
        // diy名称
        diyName : '',
        // 订单状态
        status: '',
        // 用户id
        userId: '',
        // 商品id
        eId: '',
        fileList: [],
        addForm: {
            id: 0,
            //售后类型
            ordersType: '',
            //售后原因
            ordersCause: '',
            //售后描述
            ordersDescribe: '',
            //售后图片
            imageId: '',
            //用户id
            userId: this.userId,
            eId: this.eId,
        },
        imageUrl: '', 
        file: '',
      }
    },
  mounted () {
    //获取类型id
    this.orderTypeId = this.$route.query.orderTypeId,
    //获取商品订单号
    this.orderNumber = this.$route.query.orderNumber,
    //获取商品价钱
    this.orderAmountTotal = this.$route.query.orderAmountTotal,
    //获取商品名称
    this.commodityName = this.$route.query.commodityName,
    //获取购买时间
    this.createTime = this.$route.query.createTime,
    //获取商品价钱
    this.orderAmountTotal = this.$route.query.orderAmountTotal,
    //获取diy名称
    this.diyName = this.$route.query.diyName,
    //获取状态
    this.status = this.$route.query.status,
    //获取用户id
    this.userId=this.$route.query.userId,
    //获取类型id
    this.eId=this.$route.query.id
  },
  methods: {
    //添加方法
    AfterSalesList() {
        const form =new FormData()
        form.set('id', this.addForm.id)
        form.set('ordersType', this.addForm.ordersType)
        form.set('ordersCause', this.addForm.ordersCause)
        form.set('ordersDescribe', this.addForm.ordersDescribe)
        form.set('imageId', this.addForm.imageId)
        form.set('userId', this.userId)
        form.set('eId', this.eId)
        debugger
        if (this.file == ""){
        } else {
          form.set('file', this.file, this.file.name)
        }
        // if (this.file != null) {
        //   form.set('file', this.file, this.file.name)
        // } else {
        //   form.set('imageId', this.addForm.imageId)
        // }
        this.$axios.post('/order/AfterSalesList', form
        ).then(res => {
          debugger
            if (res.data.flag) {
                this.$router.push({name: 'AfterSales'})
                this.message('添加成功', 'success')
            }
        }).catch(() => {
                this.$message.error('添加信息失败！')
            })
    },
    // 图片上传
    handleAvatarSuccess (res, file) { // 上传成功后的回调函数
      // debugger
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) { // 上传之前的图片校验
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }
      this.imageUrl = URL.createObjectURL(file)
      this.file = file
      return false
    },
    // 添加弹窗里的取消按钮 点击取消是清空from表单数据
    resetForm (formName) {
      this.$refs[formName].resetFields()/*  */
      this.addForm = false
      this.imageUrl = ''
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
    // 消息提示框
    message (message, type) {
      this.$message({
        message: message,
        type: type
      })
    }
  }
  }
  </script>
  
  <style scoped>
  .divv{
      width: 100%;
      height: 100%;
  }
  .div1{
      width: 1200px;
      height: 850px;
      margin: auto;
  }
      
  .div2{
      width: 1000px;
      height: 100%;
      background: #ffffff;
      margin: auto;
  }
  .div4{
      width: 950px;
      height: 850px;
      float: left;
      /* background: #ebebeb; */
      margin-left: 15px;
  }
  .div5{
      width: 950px;
      height: 40px;
      float: left;
      /* background: #fffefe; */
  }
  .div5-1{
    width: 310px;
    height: 100%;
    border: 1px solid #070707;
    float: left;
  }
  .div5-2{
    width: 171px;
    height: 100%;
    border: 1px solid #070707;
    border-left:0px;
    float: left;
  }
  .div5-3{
    width: 120px;
    height: 100%;
    border: 1px solid #070707;
    border-left:0px;
    float: left;
  }
  .div6{
      width: 950px;
      height: 80px;
      float: left;
      /* background: #f1c0c0; */
  }
  .div6-1{
    width: 310px;
    height: 100%;
    border: 1px solid #070707;
    border-top: 0px;
    float: left;
  }
  .div6-2{
    width: 171px;
    height: 100%;
    border: 1px solid #070707;
    border-left:0px;
    border-top: 0px;
    float: left;
  }
  .div6-3{
    width: 120px;
    height: 100%;
    border: 1px solid #070707;
    border-top: 0px;
    border-left:0px;
    float: left;
  }
  .div7{
      width: 950px;
      height: 600px;
      float: left;
      margin-top: -700px;
      margin-left: 20px;
      /* background: #f1c0c0; */
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  </style>